<template>
    <div class="upload">
        <el-upload
            ref="uploadRef"
            action=""
            :accept="props.accept"
            :auto-upload="false"
            :on-change="changeUpload"
            :on-remove="remove">
            <template #default>
                <el-button type="default">{{ isShow ? '重新选择' : '选择文件' }}</el-button>
            </template>
        </el-upload>
        <span class="download" @click="download">下载模版</span>
    </div>
</template>
<script setup lang="tsx">
import { reactive, ref, watch, computed } from 'vue';
import Dialog from '@/components/Dialog.vue';
// import selectStoreType from './selectStoreType.vue'
import { uploadFile2 } from '@/api/common';
import type { UploadInstance } from 'element-plus';
import { downloadCommon } from '@/api/ecommerce/tradingManage';
import { downloadFile } from '@/utils/utils';
import { DOWLOAD_FILE } from '@/utils/smartMarketing.js';

const uploadRef = ref<UploadInstance>();
const isShow = ref(false);
interface Props {
    modelValue: string;
    accept: string;
    importType: number;
    shopItem: string;
}
const props = withDefaults(defineProps<Props>(), {
    modelValue: '',
    accept: '.xls,.xlsx',
    importType: 7,
    shopItem: ''
});

const emit = defineEmits(['update:modelValue', 'change']);

const changeUpload = async (file: any, fileList: any) => {
    if (fileList.length > 1) {
        fileList.splice(0, 1);
    }
    const params = { file: file.raw, fileName: file.name };
    const { url: url = '' }: any = await uploadFile2(params);
    url ? (isShow.value = true) : (isShow.value = false);
    !!url && emit('update:modelValue', url);
    !!url && emit('change', url);
};

const remove = () => {
    emit('update:modelValue', '');
};

const download = async () => {
    const { url: url = '' } = await downloadCommon({ module: 'product', type: props.importType });
    url && DOWLOAD_FILE(url, (props.shopItem?.name || '') + '-商品导入模版');
};
</script>
<style scoped lang="scss">
.upload {
    position: relative;

    .download {
        position: absolute;
        top: 0;
        left: 100px;
        color: #ff6b00;
        font-size: 13px;
        cursor: pointer;
    }

    .download-tMall {
        left: 200px;
    }

    .disabled {
        color: #999;
        cursor: not-allowed;
    }
}
</style>
